import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {Button, Text, Image} from 'react-native';

// 路由
import {MainRoutes, pagesRouter} from '../router';

// 底部导航栏
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#1296db',
      }}>
      {/* 遍历展示router页面 */}
      {MainRoutes.map((item, index) => {
        // console.log(item);
        let headerShown = item.options.headerShown === false ? false : true
        return (
          <Tab.Screen
            key={index}
            name={item.name}
            component={item.component}
            options={{
              headerShown: headerShown,
              tabBarLabel: item.name,
              tabBarIcon: ({color, size, focused}) => {
                let icon = focused
                  ? item.options.iconActive
                  : item.options.icon;
                return (
                  <Image
                    style={{width: 28, height: 28}}
                    source={icon}
                    alt="搜索"
                  />
                );
              },
            }}
          />
        );
      })}
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs></MyTabs>
    </NavigationContainer>
  );
}
